<html>

<head>
  <title>几何体对象，曲线</title>
  <style>
    body {
      margin: 0;
    }

    canvas {
      display: block;
    }
  </style>
</head>

<body>
  <script src="./js/three.js"></script>
  <script src="./js/OrbitControls.js"></script>
  <script>
    // 1、创建场景
    var scene = new THREE.Scene();

    // var geometry = new THREE.Geometry(); //声明一个几何体对象Geometry
    // //参数：0, 0圆弧坐标原点x，y  100：圆弧半径    0, 2 * Math.PI：圆弧起始角度
    // var arc = new THREE.ArcCurve(0, 0, 100, 0, 2 * Math.PI);
    // //getPoints是基类Curve的方法，返回一个vector2对象作为元素组成的数组
    // var points = arc.getPoints(50);//分段数50，返回51个顶点
    // // setFromPoints方法从points中提取数据改变几何体的顶点属性vertices
    // geometry.setFromPoints(points);
    // //材质对象
    // var material = new THREE.LineBasicMaterial({
    //   color: 0x000000
    // });
    // //线条模型对象
    // var line = new THREE.Line(geometry, material);
    // scene.add(line); //线条对象添加到场景中

    var geometry = new THREE.Geometry(); //声明一个几何体对象Geometry
    var R = 100; //圆弧半径
    var N = 50; //分段数量
    // 批量生成圆弧上的顶点数据
    for (var i = 0; i < N; i++) {
      var angle = 2 * Math.PI / N * i;
      var x = R * Math.sin(angle);
      var y = R * Math.cos(angle);
      geometry.vertices.push(new THREE.Vector3(x, y, 0));
    }
    // 插入最后一个点，line渲染模式下，产生闭合效果
    // geometry.vertices.push(geometry.vertices[0])
    //材质对象
    var material = new THREE.LineBasicMaterial({
      color: 0x000000
    });
    //线条模型对象
    var line = new THREE.Line(geometry, material);
    scene.add(line); //线条对象添加到场景中


    // 绘制直线效果
    var geometry = new THREE.Geometry(); //声明一个几何体对象Geometry
    var p1 = new THREE.Vector3(50, 0, 0); //顶点1坐标
    var p2 = new THREE.Vector3(0, 70, 0); //顶点2坐标
    //顶点坐标添加到geometry对象
    geometry.vertices.push(p1, p2);
    var material = new THREE.LineBasicMaterial({
      color: 0xffff00,
    });//材质对象
    //线条模型对象
    var line = new THREE.Line(geometry, material);
    scene.add(line); //线条对象添加到场景中

    // 通过LineCurve3绘制一条三维直线。
    var geometry = new THREE.Geometry(); //声明一个几何体对象Geometry
    var p1 = new THREE.Vector3(50, 0, 0); //顶点1坐标
    var p2 = new THREE.Vector3(0, 70, 0); //顶点2坐标
    // 三维直线LineCurve3
    var LineCurve = new THREE.LineCurve3(p1, p2);
    // 二维直线LineCurve
    var LineCurve = new THREE.LineCurve(new THREE.Vector2(50, 0), new THREE.Vector2(0, 70));
    var pointArr = LineCurve.getPoints(10);
    // geometry.setFromPoints(pointArr);

    // 通过LineCurve绘制一条二维直线。
    var geometry = new THREE.Geometry(); //声明一个几何体对象Geometry
    var p1 = new THREE.Vector2(50, 0); //顶点1坐标
    var p2 = new THREE.Vector2(0, 70); //顶点2坐标
    // 二维直线LineCurve
    var LineCurve = new THREE.LineCurve(p1, p2);
    var pointArr = LineCurve.getPoints(10);
    // geometry.setFromPoints(pointArr);




    // 3、光源设置：
    //环境光    环境光颜色与网格模型的颜色进行RGB进行乘法运算
    var ambient = new THREE.AmbientLight('#444444');
    scene.add(ambient);

    //点光源  
    var point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300);
    scene.add(point);


    // 4、添加相机
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.z = 5;
    //设置相机位置
    camera.position.set(200, 300, 200);
    //设置相机方向(指向的场景对象)
    camera.lookAt(scene.position);


    // 5、创建渲染器对象
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    document.body.appendChild(renderer.domElement);

    // 6、执行渲染操作
    var animate = function () {
      renderer.render(scene, camera);
      requestAnimationFrame(animate);
      // mesh.rotation.x += 0.01;
      // mesh.rotation.y += 0.01;
    };
    animate();
    var controls = new THREE.OrbitControls(camera);//创建控件对象
  </script>
</body>

</html>